import { useState, useEffect } from 'react'
import { Card, Button, Table, Tag, Switch, message, Popconfirm, Drawer, Form, Input, InputNumber } from 'antd'
import { getUserLevelList, addUserLevel, editUserLevel, delUserLevel, changStatus } from '@/api/level'
function Level() {
  const [levelList, setLevelList] = useState([])
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  useEffect(() => {
    getList()
  }, [page])
  const getList = () => {
    getUserLevelList(page).then(res => {
      if (res.status === 200) {
        console.log(res.data)
        setLevelList(res.data.list)
        setTotal(res.data.totalCount)
      }
    })
  }
  const switchChange = (status: boolean, id: number) => {
    changStatus(id, { status: !status }).then(res => {
      if (res.status === 200) {
        getList()
        message.success('修改成功')
      } else {
        message.error('修改失败')
      }
    })
  }
  const delLevel = (id: number) => {
    delUserLevel(id).then(res => {
      if (res.status === 200) {
        getList()
        message.success('删除成功')
      } else {
        message.error('删除失败')
      }
    })
  }
  const columns = [
    {
      title: '会员等级',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '折扣率(%)',
      dataIndex: 'discount',
      key: 'discount'
    },
    {
      title: '等级序号',
      dataIndex: 'level',
      key: 'level'
    },
    {
      title: '状态',
      render: (data: any) => (
        <div className='flex2 centerFlex' style={{ maxWidth: '150px' }}>
          <Switch
            checked={data.status}
            onChange={() => {
              switchChange(data.status, data.id)
            }}
          ></Switch>
        </div>
      )
    },
    {
      title: '操作',
      render: (data: any) => (
        <div className='flex2 centerFlex' style={{ maxWidth: '150px' }}>
          <Tag
            color='lime'
            onClick={() => {
              editBtn(data)
            }}
          >
            修改
          </Tag>
          <Popconfirm
            title='注意'
            description='你确认要删除该等级吗？'
            onConfirm={() => {
              delLevel(data.id)
            }}
            okText='确认'
            cancelText='取消'
          >
            <Tag color='red'>删除</Tag>
          </Popconfirm>
        </div>
      )
    }
  ]
  // 添加修改弹框
  const [openDrawer, setOpenDrawer] = useState(false)
  const [editId, setEditId] = useState(0)
  const [form] = Form.useForm()
  const addBtn = () => {
    setEditId(0)
    setOpenDrawer(true)
    form.resetFields()
  }
  const editBtn = (data: any) => {
    setOpenDrawer(true)
    setEditId(data.id)
    form.setFieldsValue({
      discount: data.discount,
      level: data.level,
      max_price: data.max_price,
      max_times: data.max_times,
      name: data.name,
      status: data.status
    })
  }
  const saveAddLevelBtn = () => {
    form.validateFields().then(values => {
      console.log(values)
      if (editId !== 0) {
        editUserLevel(editId, values).then(res => {
          if (res.status === 200) {
            message.success('修改成功')
            getList()
            setOpenDrawer(false)
          }
        })
        return
      }
      addUserLevel(values).then(res => {
        if (res.status === 200) {
          message.success('添加成功')
          getList()
          setOpenDrawer(false)
        }
      })
    })
  }
  const btn = (
    <div style={{ textAlign: 'right' }}>
      <Button type='primary' size='large' onClick={saveAddLevelBtn}>
        提交
      </Button>
      <Button
        size='large'
        style={{ marginLeft: '15px' }}
        onClick={() => {
          setOpenDrawer(false)
        }}
      >
        取消
      </Button>
    </div>
  )
  return (
    <>
      <Card>
        <Button onClick={addBtn}>新增</Button>
        <Table
          columns={columns}
          dataSource={levelList}
          rowKey='id'
          pagination={{ total }}
          onChange={(e: any) => {
            setPage(e.current)
          }}
        />
      </Card>
      <Drawer
        title={editId === 0 ? '新增会员等级' : '修改会员等级'}
        onClose={() => {
          setOpenDrawer(false)
        }}
        open={openDrawer}
        footer={btn}
      >
        <Form form={form}>
          <Form.Item name='name' label='用户名' rules={[{ required: true, message: '请输入用户名' }]}>
            <Input placeholder='请输入用户名' />
          </Form.Item>
          <Form.Item name='level' label='密码' rules={[{ required: true, message: '请输入密码' }]} initialValue={100}>
            <Input placeholder='请输入密码' />
          </Form.Item>
          <Form.Item name='level' label='昵称' rules={[{ required: true, message: '请输入昵称' }]} initialValue={100}>
            <Input placeholder='请输入昵称' />
          </Form.Item>
          <Form.Item name='level' label='手机号' rules={[{ required: true, message: '请输入手机号' }]} initialValue={100}>
            <Input placeholder='请输入手机号' />
          </Form.Item>
          <Form.Item name='level' label='邮箱' rules={[{ required: true, message: '请输入邮箱' }]} initialValue={100}>
            <Input placeholder='请输入邮箱' />
          </Form.Item>
          <Form.Item name='status' label='是否启用' rules={[{ required: true }]} initialValue={true}>
            <Switch></Switch>
          </Form.Item>
        </Form>
      </Drawer>
    </>
  )
}
export default Level
